$btn-padding: 15px 40px;
$xs-padding: 2px 3px;
$sm-padding: 8px 16px;
$lg-padding: 18px 30px;

// -----------------------------------------------------------------------------
// This file contains all styles related to the button component.
// -----------------------------------------------------------------------------
.btn,
button,
[class^='btn-'] {
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 0 solid transparent;
  padding: $btn-padding;
  border-radius: var(--border-radius);
  color: white;
  display: inline-flex;
  opacity: 0.9;

  &:hover {
    text-decoration: none;
    opacity: 1;
  }

  &.bg-transparent {
    color: var(--body-text);
  }
}


//icon button
.icon-btn {
  padding: 0;
  &.btn-sm {
    padding: 0;
  }

  span {
    padding: 0 10px 0 5px;
    vertical-align: middle;
  }
}

//btn sizes
.btn-xs,
.btn-group-xs > .btn,
.btn-xs .btn-label {
    padding: $xs-padding;
    font-size: .65em;
    line-height: 1.5em;
}

.btn-group-xs > .btn {
  padding: #{$xs-padding - 1};
}

.btn-sm,
.btn-group-sm > .btn,
.btn-sm .btn-label {
    padding: $sm-padding;
    font-size: 0.87em;

}

.btn-group-sm > .btn {
  padding: 4px 9px;
  margin-left: -3px;
}

.btn-lg,
.btn-group-lg > .btn,
.btn-lg .btn-label {
    padding: $lg-padding;
    font-size: 1.2em;
}

//btn roles
.role-primary {
  background: var(--link-text);
}

.role-secondary {
  background: transparent;
  color: var(--primary) !important;
  border: solid thin var(--primary);
}

.role-tertiary {
  background: var(--link-text);
  padding: $sm-padding;
}

.role-link {
  background: transparent;
  color: var(--link-text) !important;
  padding: $sm-padding;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.role-multi-action {
  background: var(--accent-btn);
  border: solid thin var(--accent-btn);
  color: var(--accent-btn-text);
  padding: 8px;
  border-radius: 2px;
  line-height: 0;

  &.btn-sm {
    padding: 8px;;
  }
  &.btn-lg {
    padding: 13px 4px;
  }
}


.icon-group i {
  font-size: 1.5em;
}

//disabled
.btn-disabled,
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  @extend .bg-disabled;
  cursor: not-allowed;
}

.btn-group {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  padding: 0;
  background: var(--input-bg);
  border-radius: var(--border-radius);

  .btn {
    position: relative;
    display: inline-block;
    border-radius: 0;

    &:focus {
      // Move the focused one to the top so that the focus ring is all visible
      z-index: 1;
    }

    &.active {
      @extend .bg-primary;
    }

    &:first-child {
      border-top-left-radius: var(--border-radius);
      border-bottom-left-radius: var(--border-radius);
    }

    &:last-child {
      border-top-right-radius: var(--border-radius);
      border-bottom-right-radius: var(--border-radius);
    }
  }
}
